<template>
  <div class="password-container">
    <div class="app-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <span>修改密码</span>
        </div>

        <div class="from-box">
          <el-form
            :model="pwdFrom"
            ref="pwdFrom"
            :rules='pwdRules'
          >
            <el-form-item
              label="旧密码"
              prop='oldPassword'
            >
              <el-input
                v-model.trim="pwdFrom.oldPassword"
                type="password"
                clearable
                minlength="6"
                maxlength="12"
                show-password
                @keyup.enter.native="updatePassword()"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="新密码"
              prop='newPassword'
            >
              <el-input
                v-model.trim="pwdFrom.newPassword"
                type="password"
                clearable
                minlength="6"
                maxlength="12"
                show-password
                @keyup.enter.native="updatePassword()"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="确认新密码"
              prop='checkPwd'
            >
              <el-input
                v-model.trim="pwdFrom.checkPwd"
                type="password"
                clearable
                minlength="6"
                maxlength="12"
                show-password
                @keyup.enter.native="updatePassword()"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="updatePassword()"
              >提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { updatePasswordAPI } from '@/api'
export default {
  name: 'userPassword',
  data () {
    return {
      pwdFrom: {
        oldPassword: '',
        newPassword: '',
        checkPwd: ''
      },
      pwdRules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空', trigger: 'change' },
          {
            min: 6,
            max: 12,
            type: 'string',
            message: '密码要求6-12个字符',
            trigger: 'change'
          }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'change' },
          {
            min: 6,
            max: 12,
            type: 'string',
            message: '密码要求6-12个字符',
            trigger: 'change'
          }
        ],
        checkPwd: [
          { required: true, message: '确认密码不能为空', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (value !== this.pwdFrom.newPassword) {
                callback(new Error('两次密码输入不一致!'))
              } else callback()
            },
            trigger: 'change'
          }
        ]
      }
    }
  },
  methods: {
    // 修改密码 -> 发起请求
    updatePassword () {
      this.$refs.pwdFrom.validate(async (valid) => {
        if (valid) {
          try {
            const { success, code } = await updatePasswordAPI({
              ...this.pwdFrom,
              checkPwd: ''
            })
            if (success && code === 10000) {
              this.$store.dispatch('user/logoutActions')
            }
          } catch (err) {
            return console.dir(err)
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.box-card > div {
  padding: 10px 30px;
}

.tab-pane {
  padding: 20px;
}

.el-pagination {
  text-align: center;
  margin-top: 20px;
}

.from-box {
  margin: 0 auto;
  width: 50%;
}
</style>
